import {
  getFileInfoByPage,
  updateFileInfo,
  delFileInfo,
  getFileType,
  getProjectName,
  uploadFileInfo,
  downloadFile,
  getFileInfoByPageAndInfoId,
} from '@/services/project/fileInfo';
import { PlusOutlined, UploadOutlined, ArrowLeftOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Button, Form, Input, message, Modal, Tree, Select, Upload, Tooltip } from 'antd';
import { sortTran, filterTran } from '@/utils/requestUtil';
import React, { useEffect, useRef, useState } from 'react';
import { Ellipsis } from '@/components/Ellipsis';
import { history } from 'umi';
import dayjs from '@/components/dayjs';
const FileInfo = React.forwardRef((props, ref) => {
  const actionRef = useRef<ActionType>();
  const [form] = Form.useForm();
  const refs = useRef(null);
  const dateFormat = 'YYYY-MM-DD';

  React.useImperativeHandle(ref, () => ({
    update() {
      actionRef.current?.reload();
    },
  }));

  const columns: ProColumns[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      width: 50,
    },
    {
      title: '项目名称',
      dataIndex: 'projectName',
      width: 180,
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '文件名称',
      dataIndex: 'fileName',
      width: 190,
      align: 'center',
      sorter: true,
      render: (text, record) => [
        <a
          key="editKey"
          onClick={async () => {
            // const result = await downloadFile(record.id);
            // downloadSource(result, '222');
            // console.log(record.id, 'record.id');
            // console.log('下载文件', result);
            downloadFile(record.id).then((res) => {
              const aLink = document.createElement('a');
              document.body.appendChild(aLink);
              aLink.style.display = 'none';
              aLink.href = window.URL.createObjectURL(res);
              aLink.setAttribute('download', `${record.fileName}`);
              aLink.click();
              document.body.removeChild(aLink);
            });
          }}
        >
          {Ellipsis(record.fileName)}
        </a>,
      ],
    },

    {
      title: '文件类别',
      dataIndex: 'category',
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    // {
    //   title: '文件编号',
    //   dataIndex: 'fileCode',
    //   width: 90,
    //  align: 'center',sorter: true,
    //   render: (text) => <>{Ellipsis(text)}</>,
    // },
    {
      title: '文件后缀',
      dataIndex: 'fileExtEndDate',
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    },

    {
      title: '文件大小',
      dataIndex: 'fileSize',
      align: 'center',
      sorter: true,
      render: (text) => <div>{Math.floor(text / 1024)}KB</div>,
    },
    {
      title: '创建日期', //表头显示的名称
      search: false,
      dataIndex: 'createTime',
      align: 'center',
      sorter: true,
      render: (text, record, _, action) => {
        return dayjs(record.createTime).format(dateFormat);
      },
      // render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '创建人', //表头显示的名称
      search: false,
      dataIndex: 'createName',
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '备注',
      dataIndex: 'memo',
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    // {
    //   title: '操作',
    //   valueType: 'option',
    //   key: 'option',
    //   fixed: 'right',
    //   width: 90,
    //  align: 'center',sorter: true,
    //   render: (text, record) => [
    //     <a
    //       key="editKey"
    //       onClick={() => {
    //         setModalVisit(true);
    //         setCreateOrUpdate(true);
    //         setFormTitle('编辑');
    //         form.setFieldsValue({
    //           basePath: record.basePath,
    //           category: record.category,
    //           fileCode: record.fileCode,
    //           fileData: record.fileData,
    //           fileExtEndDate: record.fileExtEndDate,
    //           fileName: record.fileName,
    //           fileSize: record.fileSize,
    //           memo: record.memo,
    //           reserved: record.reserved,
    //           savePath: record.savePath,
    //           serialNo: record.serialNo,
    //           infoId: record.infoId,
    //           projectName: record.projectName,
    //           id: record.id,
    //         });
    //       }}
    //     >
    //       编辑
    //     </a>,
    //     <a
    //       key="deleteKey"
    //       onClick={() => {
    //         Modal.confirm({
    //           title: '删除',
    //           content: '确定要删除吗',
    //           okText: '确认',
    //           cancelText: '取消',
    //           onOk: async () => {
    //             await delFileInfo({ id: record.id });
    //             actionRef.current!.reload();
    //           },
    //         });
    //       }}
    //     >
    //       删除
    //     </a>,
    //   ],
    // },
  ];

  return (
    <PageHeaderWrapper title={false} breadcrumb={undefined}>
      <ProTable
        headerTitle="附件信息查询"
        actionRef={actionRef} //用于触发刷新操作等，看api
        rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
        formRef={refs}
        toolBarRender={(action, { selectedRows }) => [
          <Button
            key="button"
            icon={<ArrowLeftOutlined />}
            onClick={() => {
              history.push({
                pathname: '/design/productDesign',
                query: {
                  tab_state: history.location.state.reviewState, //传参
                },
              });
            }}
            type="primary"
          >
            返回
          </Button>,
        ]}
        request={async (params = {}, sort, filter) => {
          const res = { ...params, infoId: history.location.state.infoId };
          const sorters = sortTran(sort);
          const filters = filterTran(res);
          const result = await getFileInfoByPage({ ...params, sorters: sorters, filters: filters });
          // const res = await getFileType(null);
          // const typeTemp: any[] = [];
          // res.data.map((item: any, index: any) => {
          //   typeTemp.push({ value: item, label: item });
          // });
          // setOptionsFileAdd(typeTemp);
          // const getProName = await getProjectName(null);
          // const value2 = [] as any[];
          // getProName.data.map((item: any) => {
          //   value2.push({ value: item.infoId, label: item.projectName });
          // });
          // setOptionsProName(value2);
          return {
            data: result.data.content,
            total: result.data.totalElements,
            success: result.success,
          };
        }}
        search={false}
        columns={columns}
        scroll={{ x: 1200, y: 350 }}
        rowSelection={{}}
      />
    </PageHeaderWrapper>
  );
});
export default FileInfo;
